<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="generator" content="emlog">
    <!-- Bootstrap Styles-->
    <link href="/jsp/system/assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="/jsp/system/assets/css/font-awesome.css" rel="stylesheet" />
    <!-- Morris Chart Styles-->
    <link href="/jsp/system/assets/js/morris/morris-0.4.3.min.css" rel="stylesheet" />
    <!-- Custom Styles-->
    <link href="/jsp/system/assets/css/custom-styles.css" rel="stylesheet" />
	<link href="/jsp/system/assets/css/select2.min.css" rel="stylesheet" />
    <!-- jQuery Js -->
    <script src="/jsp/system/assets/js/jquery2.1.1.js" type="text/javascript"></script>
	<script src="/jsp/system/assets/js/bootstrap-3.3.0.js" type="text/javascript"></script>
	<script src="/jsp/system/assets/js/jqPaginator.js" type="text/javascript"></script>
	<script src="/jsp/system/assets/js/select2.min.js" type="text/javascript"></script>
</head>
<body>
 <div id="wrapper">
        <nav class="navbar navbar-default top-navbar" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html">CourageAQ博客</a>
            </div>

        </nav>
        <!--/. NAV TOP  -->
        <nav class="navbar-default navbar-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav" id="main-menu">
                    <li>
                        <a  href="/backblog/index.action"><i class="fa fa-dashboard"></i>文章列表</a>
                    </li>
                     <li>
                        <a class="active-menu" href="/backblog/type.action"><i class="fa fa-dashboard"></i>文章分类</a>
                    </li>
                    <li>
                        <a href="/backblog/upload.action"><i class="fa fa-desktop"></i>文章上传</a>
                    </li>
                 </ul>
            </div>
        </nav>
        <!-- /. NAV SIDE  -->
        
        <!--  正文内容-->
        <div id="page-wrapper">
            <div id="page-inner">
				<div class="form-group form-inline">
					<select name="type" id="type" placeholder="请输入标题" class="js-example-basic-multiple"  multiple="multiple" style="width: 170px;margin-left: 10px;">
					</select>
					<button type="submit" class="btn btn-sm btn-success search"><i class="fa fa-search"></i>搜索</button>
					<button type="button" class="btn btn-sm btn-info add"> <i class="fa fa-plus-circle"></i>新增</button>
				</div>
				<div class="table-responsive" id="tables">
		     <table class="table table-bordered  table-striped table-hover" id="treeTable">
					<thead>
						<tr>
							<th style="text-align: center;">分类名</th>
							<th style="text-align: center;">数量</th>
							<th style="text-align: center;">操作</th>
						</tr>
					</thead>
					<tbody id="tbody">
					</tbody>
				</table>
		     
			</div>
				<div id="page" class="pagination" style="float: right;"></div>
				<!-- <footer><p>Copyright &copy; 2018.Company name All rights reserved.More Templates </footer> -->
            </div>
        </div>
    </div>
    <!-- /. WRAPPER  -->
    <!-- JS Scripts-->
</body>
<script>
$(document).ready(function(){
	
	var totalPages = "${pages.totalPages}";
	var pageNum = "${pages.pageNum}";
	console.log(totalPages);
	//总页数
	$('#page').jqPaginator({
	    totalPages: parseInt(totalPages),
	    visiblePages: 5,
	    currentPage: parseInt(pageNum),
	    first: '<li class="first"><a href="javascript:void(0);">首页</a></li>',
	    prev: '<li class="prev"><a href="javascript:void(0);">上一页</a></li>',
	    next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
	    last: '<li class="last"><a href="javascript:void(0);">尾页</a></li>',
	    page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
	    onPageChange: function (num) {
	    	getDataJson(num,null);
	    }
	});
	
	//动态加载select的值，获取所有权限名称，并将用户所具有的权限默认添加
  	$.getJSON("/backblog/articletype.action",function(data){
    	var datas=[];
		$.each(data,function(n,m){
			var jsons ={
					id: m.id,
					text: m.typename
					};
			datas.push(jsons);
		});
		$(".js-example-basic-multiple").select2({
			maximumSelectionLength: 1,			//只允许选择一个父级菜单
			data: datas
	    });
		//清空
		//$(".js-example-basic-multiple").empty();
	});
	
	//搜索
	$(".search").click(function(){
		var type = $("#type").val();
		getDataJson("",type);
	});
	
	function getDataJson(num,type){
		if(typeof(type)=="undefined" || type == null){
			type = "";
		}
		var url = num == "" ? "/backblog/listtype.action?type=" + type : "/backblog/listtype.action?page=" + num;
    	$.get(url,function(data){
    		var html = "";
    		$.each(data.result.item,function(m,n){
    			html+="<tr>";
    			html+="<td width='10%' style='text-align: center;'>"+ n.typename+"</td>";
    			html+="<td width='10%' style='text-align: center;'>"+ n.num+"</td>";
    			html+="<td width='5%' style='text-align: center;'><button class='btn btn-success btn-xs'>查看</button></td>";
    			html+="</tr>";
    		});
    		$("#tbody").html(html);
    	});
	}
	//新增
	$(".add").click(function(){
		
	});
});
</script>
</html>